物理像素、逻辑像素、css 像素

物理像素

设备屏幕实际拥有的像素点，单位用 px 表示。

在同样一个设备上，每 1 个设备像素所代表的物理长度(如英寸)是固定不变的 在不同的设备之间，每 1 个设备像素所代表的物理长度(如英寸)是可以变化的

逻辑像素(CSS 像素)

也叫“设备独立像素”（Device Independent Pixel，DIP），可以理解为反映在 CSS/JS 程序里面的像素点，也就是说 css 像素是逻辑像素的一种。

在同样一个设备上，每 1 个 CSS 像素所代表的设备像素是可以变化的 在不同的设备之间，每 1 个 CSS 像素所代表的设备像素是可以变化的

我们平时描述一张图片宽高时一般用 200px * 100px，这里的 px 也是逻辑像素。

设备像素比

一个设备的物理像素与逻辑像素之比： 像素比=物理像素/css 像素

1 个逻辑像素等于 1 个物理像素还是等于多个物理像素是由设备本身决定的，我们可以通过 DPR 也就是 window.devicePixelRatio 获知